<template>
	<view>
		<!-- 导航栏 -->
		<custom-ui bgColor="bg-gradual-orange" :isBack="true"><block slot="content">歌单列表</block></custom-ui>
		<!-- 分类 -->
		<view class="kind flex justify-around flex-wrap ">
			<view class="item flex flex-column " hover-class="clickit"  @click="getAll">全部</view>
			<view class="item flex flex-column clickit" hover-class="clickit"  @click="getZY">综艺</view>
			<view class="item flex flex-column " hover-class="clickit"  @click="getLX">流行</view>
			<view class="item flex flex-column " hover-class="clickit"  @click="getYS">影视</view>
			<view class="item flex flex-column " hover-class="clickit"  @click="getHY">华语</view>
			<view class="item flex flex-column " hover-class="clickit"  @click="getQC">清晨</view>
		</view>
		
		
		
		<!-- 主界面 -->
			
	<!-- <view class="focus" :style="{'width': width + 'rpx'}">
			<view class="ul list-item-text">
				<view v-for="(item,index) in list" :key="item.id" class="li"
					:style="{'z-index': -1 * index,'width': itemWidth + 'rpx','transform':translateX(index+moving),'transition': transition,}">
					<view class="item" :style="{'transform':`scale(${1-0.1*index+scale})`,'transition': transition}"
						@transitionend="transitionend(index)">
						<view class="item-content" :style="{'opacity':index ? 1 : moving ? 0 : 1}">
							<image class="img" :src="item.url"></image>
							<view class="">
								{{item.id}}<br>
							
							</view>
						</view>
					</view>
				</view>
				<view class="li list-item-text"
					:style="{'z-index': -1 * list.length,'width': itemWidth + 'rpx','transform':translateX(list.length+moving)}">
					<view class="item" :style="{'transform':`scale(${1-0.1*list.length+scale})`,'transition': transition}">
						<image class="img" :src="list[0].url"></image>
						<view class="">
							红眼专属（不定时更新<br>
							666666
						</view>
					</view>
				</view>
			</view>
	</view> -->
	<view class="box1">
		<!-- <view class="hight"></view> -->
		<!-- 轮播图 -->
		<view class="banner" >
			<swiper autoplay="true" interval="5000" duration="500" indicator-dots="true">
				<swiper-item v-for="item in list">
					<image :src="item.url" style="height:150px;width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- <image src="../../static/15.jpg"></image> -->
	</view>
		
		<view  v-for="(item,index) in songList" :key='item.id'>
					<view class="flex justify-around" >
						<view class="item1">
							<image src="../../../static/comprehensive-arts/1.jpg"></image>
							<view class="list-item-text">{{item.songtype}}</view>
						</view>
						
						
						<view class="item1" >
							<image src="../../../static/comprehensive-arts/2.jpg"></image>
							<view class="list-item-text">群星演唱【音乐】</view>
						</view>
						
						<view class="item1">
							<image src="../../../static/comprehensive-arts/3.jpg" ></image>
							<text class="list-item-text">国际音乐会</text>
						</view>		
					</view>
				
				<view class="flex justify-around">
					<view class="item1">
						
						<image src="../../../static/comprehensive-arts/4.jpg"></image>
						<text class="list-item-text">我是唱作人</text>
					</view>
					<view class="item1">
						<image src="../../../static/comprehensive-arts/5.jpg"></image>
						<text class="list-item-text">音效大合集</text>
					</view>
					<view class="item1">
						<image src="../../../static/comprehensive-arts/6.jpg"></image>
						<text class="list-item-text">音乐盛典</text>
					</view>
				</view>	
					
				<view class="flex justify-around">
					<view class="item1">
						<image src="../../../static/comprehensive-arts/7.jpg"></image>
						<text class="list-item-text">李宇春【专辑】</text>
					</view>
					
					<view class="item1">
						<image src="../../../static/comprehensive-arts/8.jpg"></image>
						<text class="list-item-text">乐队的夏天</text>
					</view>
					
					<view class="item1">
						<image src="../../../static/comprehensive-arts/9.jpg"></image>
						<text class="list-item-text">世界你好</text>
					</view>
				</view>
					
				</view>
			
		
		
	

	</view>

</template>

<script>
	export default {
		props: {
					// 整个轮播图的宽度
					width: {
						type: Number,
						default: 750
					},
					// 轮播图里每张的宽度
					itemWidth: {
						type: Number,
						default: 600
					},
					interval: {
						type: Number,
						default: 3000
					},
					duration: {
						type: Number,
						default: 1000
					}
				},
		data:function() {
			return{
				songList:[
					{id:1,songtype:'轻快音乐集',album:'经典20年'},
					{id:2,songtype:'缓慢 睡眠 纯音乐 ',album:'经典10年'},
					{id:3,songtype:'【伤感纯音乐】难过需要释放',album:'经典20年'},
					{id:4,songtype:'夜晚助眠 温柔治愈纯音乐',album:'经典20年'},
					{id:5,songtype:'红眼专属（不定时更新）',album:'经典20年'},
				],
				list: [{
						url: 'https://i04piccdn.sogoucdn.com/b2875989496c3e62',
						id: '一支乐队'
					},
					{
						url: 'https://i01piccdn.sogoucdn.com/0353175756825a1d',
						id: '牛奶小胡子 '
					},
					{
						url: 'https://i02piccdn.sogoucdn.com/957bb3380784a26f',
						id: '【伤感纯音乐】难过需要释放'
					}
					],
						scale: 0, //移动的时候控制缩放
						rightPadding: 0, //计算右边每张图要凸出来多少
						padding: 0, //计算缩放后，缩放的图片右边空出的距离
						transition: `all ${this.duration/1000}s`, //控制过渡
						moving: 0, //0表示不动，-1表示正在移动
						timer: null //定时器
				
			
			}
		},
		mounted() {
					// 右边凸出来的单张的宽度
					this.rightPadding = (this.width - this.itemWidth) / (this.list.length - 1);
					this.padding = this.itemWidth * 0.1 / 2;
					this.setAction()
				},
		methods:{	
		getAll(){
			uni.navigateTo({
				url:'../../showList/showList'
			})
		},
		getZY(){
			uni.navigateTo({
				url:'../../showList/otherspage/comprehensive-arts'
			})
		},
		getLX(){
			uni.navigateTo({
				url:'../../showList/otherspage/popular'
			})
		},
		getYS(){
			uni.navigateTo({
				url:'../../showList/otherspage/film'
			})
		},
		getHY(){
			uni.navigateTo({
				url:'../../showList/otherspage/chineseL'
			})
		},
		getQC(){
			uni.navigateTo({
				url:'../../showList/otherspage/morning'
			})
		},
			
			transitionend(index) {
				if (!index) {
								this.transition = "none";
								this.scale = 0;
								this.moving = 0;
								this.list.push(this.list.shift());
							}
						},
			setAction() {
				this.timer = setInterval(() => {
				this.transition = `all ${this.duration/1000}s`;
				this.scale = 0.1;
				this.moving = -1;
				}, this.interval)
			},
				// 初始时每张的偏移宽度
				translateX(index) {
					const scaleRightPadding = this.itemWidth * 0.1 * index / 2;
					return `translateX(${this.rightPadding * index + scaleRightPadding + 'rpx'})`
						}
					},
					beforeDestroy() {
						this.timer && clearInterval(this.timer)
					}
		
		
	}
</script>

<style lang="scss">
	.box1{
		box-sizing: border-box;//添加此行使borders和padding全都包含在定义的宽高里面
		padding: 10px;//内边距10像素，使他不要贴紧边缘
		border-radius: 5px;
		justify-content: space-around;
		flex-wrap:wrap ;
		image{
			border-radius: 5px;
			width: 340px;
			height: 170px;
		}
	}
.top{
	
	height:50px;
	line-height: 50px;
	text-align: center;
	background:linear-gradient(orange,red);
	background: -webkit-linear-gradient(orange,red);
	background: -moz-linear-gradient(orange,red);
	background: -o-linear-gradient(orange,red);
}
.header{
		position: fixed;
		width: 100%;
		left:0;
		top:0;
		z-index:1000;
	}
.clickit{
	border-bottom:3px solid #F0AD4E
	
}
.kind{
	height:90px;
	line-height: 20px;
	height: 35px;
	width: 100%;
	padding-top: 5px;
	white-space: normal;
	color: #666;
	font-size: 13px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;			
}


.text-area{
	text-align: center;
}



.flex{
	display: flex;
	&-column{
		flex-direction: column;
	}
	&-wrap{
		flex-wrap: wrap;
	}
}


.justify{
	&-center{
		justify-content: center;
		
	}
	&-around{
		justify-content: space-around;
	}
	
	&-between{
		justify-content: space-between;
	}
	
}

.algin-center{ //交叉轴
	align-items: center;
}

.item{
	// height: 300px;
	display: flex;
	flex-direction: column;
	//#顺时针转向下写
	align-items: center;
	width: 50px;
	image{
		width: 100px;
		height: 120px;
	}
	text{
		font-size: 10px;
	}
	
}

.list-item-text {
				height: 35px;
				width: 100%;
				padding-top: 2px;
				white-space: normal;
				color: #666;
				font-size: 12px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

.item1{
	// height: 300px;
	width: calc(100% / 3 - 10px) ;
	display: flex;
	flex-direction: column;
	//#顺时针转向下写
	align-items: center;
	image{
		height: 120px;
		// width: 105px;
		border-radius: 7px;
	}
	text{
		font-size: 10px;
		
	}
}

.songlistItem{
	.listNO{
		width: 30px;
		border: 1px solid #4CD964;
	}
	
}
.box{
	width: 100px;
	height: 100px;
	background-color: #4CD964;
}

.focus {
		position: relative;
		overflow: hidden;
		width: 750rpx;
		height: 500rpx;
		padding: 20px;
		.img {
			width: 100%;
			height: 80%;
			vertical-align: middle;
		}

		.ul {
			position: absolute;
			width: 100%;
			height: 100%;

			.li {
				position: absolute;
				height: 100%;
			}
		}

		.item {
			width: 100%;
			height: 100%;

			.item-content {
				width: 100%;
				height: 100%;
				background-color: #fff;
			}
		}
}
</style>